<template>
      <Collapse active-key="1" accordion>
        <Row>
          <i-col span="20">
            <Strong>权限资源url管理</Strong>
          </i-col>
          <i-col span="4">
            <i-button type="primary" shape="circle" @click="switchOpen = true">新增权限</i-button>
          </i-col>
        </Row>
        <template v-for="(obj, index) in dataList">
          <Panel :key="index">
                {{obj.permissionName}}
                <i-button icon="ios-trash-outline" @click="deletePermission(obj.permissionId)">删除</i-button>
            <Row v-for="(objSource, index2) in obj.resourceList" slot="content">
              <i-col style="border-bottom:1px solid #cfd5d5;" span="18">
                <p>{{objSource.url}}</p>
              </i-col>
              <i-col span="6">
                <i-button icon="ios-trash-outline" @click="deleteResource(objSource.id)">删除</i-button>
              </i-col>
            </Row>
            <Row v-if="resourcecShow" slot="content">
              <i-col span="18">
                <i-input size="large" v-model="newResourcecUrl" placeholder="请输入资源路径"></i-input>
              </i-col>
              <i-col span="6">
                <i-button type="info" @click="addResource(obj.permissionName,obj.permissionId)">保存</i-button>
                <i-button type="error" @click="resourcecShow = false">取消</i-button>
              </i-col>
            </Row>
            <Row v-if="!resourcecShow" slot="content">
              <i-col span="18">
                <i-button type="info" icon="ios-more" @click="resourcecShow = true">新增url</i-button>
              </i-col>
            </Row>
          </Panel>

          <Modal v-model="switchOpen" title="新增权限" width = "30%">
            <i-input type="text" v-model="newPermissionName" placeholder = "请输入权限名称"></i-input>
            <div slot="footer">
              <Button type="text" size="large" @click="switchOpen=false">取消</Button>
              <Button type="primary" size="large" @click="addPermission()">确定</Button>
            </div>
          </Modal>
        </template>
      </Collapse>
</template>

<script lang="ts">

import {Component, Vue, Watch} from 'vue-property-decorator'
import {addSecurityPermissionUrl, getCeSecurityResourceListUrl,addSecutityResrouceUrl,deleteSecutityResrouceUrl,deleteSecurityPermissionUrl} from "@/common/HttpRequestUrl";

@Component
export default class PermissionResourceManage extends Vue {

  //  弹框开关
  switchOpen = false
  //  新增资源路径输入框开关
  resourcecShow = false

  //  数据监听
  @Watch("switchOpen")
  watchSwitchOpen( newVal ) {

    if ( newVal ) {
     this.newPermissionName = ''
    }
  }
  @Watch("resourcecShow")
  watchResourcecShow( newVal ) {

    if ( newVal ) {
      this.newResourcecUrl = ''
    }
  }
  //  权限资源页面元素
  dataList = []

  //  初始化数据
  mounted () {
    this.getResourceList()
  }

  //  获取权限资源列表数据并赋值到页面元素
  getResourceList () {
    let thisOObj = this
    this.$get( getCeSecurityResourceListUrl ).then(function (res) {
      thisOObj.dataList = res.data
    })
  }

  //  添加新的权限
  newPermissionName = ''
  addPermission () {

    if ( this.newPermissionName === '' ) {

      this.$Message.error('输入的名称不能为空');
      return
    }

    let thisObj = this
    this.$post(addSecurityPermissionUrl,{name:this.newPermissionName}).then(function (res) {

      if ( res.status ) {
        thisObj.switchOpen = false
        thisObj.$Message.success('添加成功')
        //  刷新界面数据
        thisObj.getResourceList()
      }else {
        thisObj.switchOpen = true
        thisObj.$Message.error('添加失败')
      }
    })

  }
  //  删除权限及关联资源路径
  deletePermission ( permissionId ) {

    let thisObj = this
    //  对话框弹出层
    this.$Modal.confirm({
      title: '权限删除',
      content: '是否要删除该权限',
      onOk: () => {

        thisObj.$post(deleteSecurityPermissionUrl,{id:permissionId}).then(function (res) {
          if ( res.status ) {
            thisObj.$Message.success('删除成功');
            //  刷新界面数据
            thisObj.getResourceList()
          }else {
            thisObj.$Message.error("删除失败")
          }
        })

      }
    });
  }

  //  添加新的资源
  newResourcecUrl = ''
  addResource ( name, permissionId ) {

    if ( this.newResourcecUrl === '' ) {
      this.$Message.error('输入的名称不能为空')
      return
    }

    let thisObj = this
    this.$post(addSecutityResrouceUrl,{name:name,permissionId:permissionId,url:this.newResourcecUrl}).then(function (res) {

      if ( res.status ) {
        thisObj.resourcecShow = false
        thisObj.$Message.success('添加成功')
        //  刷新界面数据
        thisObj.getResourceList()
      }else {
        thisObj.resourcecShow = true
        thisObj.$Message.error('添加失败')
      }
    })
  }

  //  删除资源路径
  deleteResource ( ResourceId ) {

    let thisObj = this
    //  对话框弹出层
    this.$Modal.confirm({
      title: '权限资源路径删除',
      content: '是否要删除该路径',
      onOk: () => {

        thisObj.$post(deleteSecutityResrouceUrl,{id:ResourceId}).then(function (res) {
          if ( res.status ) {
            thisObj.$Message.success('删除成功');
            //  刷新界面数据
            thisObj.getResourceList()
          }else {
            thisObj.$Message.error("删除失败")
          }
        })

      }
    });
  }

}

</script>

<style scoped>

</style>
